<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
   <meta charset="UTF-8">
   <title></title>
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">

   <!--====== Favicon Icon ======-->
   <link rel="shortcut icon" href="/images/favicon.png" type="image/png">

   <!--====== Bootstrap CSS ======-->
   <link rel="stylesheet" href="/css/bootstrap.min.css">
   <link rel="stylesheet" href="/font/bootstrap-icons.css">

   <!--====== LayerUI CSS ======-->
   <link rel="stylesheet" href="/js/layui/css/layui.css">

   <!--====== default CSS ======-->
   <link rel="stylesheet" href="/css/default.css">
   <!--====== Style CSS ======-->
   <link rel="stylesheet" href="/css/style.css">
   <!--====== myStyle CSS ======-->
   <link rel="stylesheet" href="/css/myStyle.css">
</head>
<body id="content-body">
<!--[if IE]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->

<!--====== PRELOADER PART START ======-->

<div class="preloader">
   <div class="loader">
      <div class="ytp-spinner">
         <div class="ytp-spinner-container">
            <div class="ytp-spinner-rotator">
               <div class="ytp-spinner-left">
                  <div class="ytp-spinner-circle"></div>
               </div>
               <div class="ytp-spinner-right">
                  <div class="ytp-spinner-circle"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

<!--====== PRELOADER PART ENDS ======-->

<!--====== NAVBAR TWO PART START ======-->

<section class="navbar-area sticky">
   <div class="container">
      <div class="row">
         <div class="col-lg-12">
            <nav class="navbar navbar-expand-lg">

               <a class="navbar-brand" href="#">
                  <img src="/images/logo2.png" alt="Logo" width="64px">
               </a>

               <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTwo" aria-controls="navbarTwo" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="toggler-icon"></span>
                  <span class="toggler-icon"></span>
                  <span class="toggler-icon"></span>
               </button>

               <div class="collapse navbar-collapse sub-menu-bar" id="navbarTwo">
                  <ul class="navbar-nav m-auto">
                     <li class="nav-item"><a class="page-scroll" th:href="@{/#home}">首页</a></li>
                     <li class="nav-item"><a class="page-scroll" th:href="@{/#content}">大赛介绍</a></li>
                     <li class="nav-item"><a class="page-scroll" th:href="@{/#plan}">赛程流程</a></li>
                     <li class="nav-item"><a class="page-scroll" th:href="@{/uis/enrollUI}">大赛报名</a></li>
                     <li class="nav-item"><a class="page-scroll" th:href="@{/#books}">学习资料</a></li>
                     <li class="nav-item"><a class="page-scroll" th:href="@{/#org}">组织机构</a></li>
                     <li class="nav-item"><a class="page-scroll" th:href="@{/uis/welfareUI}">公益行</a></li>
                     <li class="nav-item active"><a class="page-scroll" th:href="@{/uis/cooperUI}">对外合作</a></li>
                     <li class="nav-item"><a class="page-scroll" th:href="@{/uis/infomations}">下载</a></li>
                  </ul>
               </div>

               <div class="navbar-btn d-none d-sm-inline-block">
                  <ul>
                     <li><a class="solid" th:href="@{/uis/loginUI}">登陆</a></li>
                  </ul>
               </div>
            </nav> <!-- navbar -->
         </div>
      </div> <!-- row -->
   </div> <!-- container -->
</section>

<!-- ==================== BANNER START============================= -->
<div class="banner">
   <div class="layout">
      <h2>对外合作</h2>
      <h3>EXTERNAL COOPERATION</h3>
   </div>
</div>
<!-- ====================  BANNER END============================= -->

<div class="container">
   <div class="cooper-panel">
      <div class="row">
         <div class="col-lg-6 left">
            <div class="left-title">企业合作</div>
            <div>
               <p>企业合作主要是为帮助企业更好的发展而提供的合作，本着公益性的原则，在免费的前提下提供一下几类合作：</p>
               <p>1、参会参展参赛，可以提出相应的申请，并表明参加哪类会、哪类展和哪类赛；</p>
               <p>2、提供横向课题，寻求科研机构合作；</p>
               <p>3、用工需求，提出用工数量和技术要求以及可派教师的数量和时间。</p>
            </div>
         </div>
         <div class="col-lg-6 right">
            <div class="right-title">合作申请</div>
            <form id="myForm">
               <input type="text" name="name" id="name" class="form-control" placeholder="企业名称*">
               <select id="cooperType" name="cooperType" class="form-control">
                  <option value="">请选择合作类型*</option>
                  <option value="1">参会参展参赛申请</option>
                  <option value="2">科研合作申请</option>
                  <option value="3">用工需求申请</option>
               </select>
               <input type="text" name="personName" id="personName" class="form-control" placeholder="负责人*">
               <input type="text" name="position" id="position" class="form-control" placeholder="职务*">
               <input type="text" name="mobile" id="mobile" class="form-control" placeholder="联系方式*">
               <textarea name="detail" id="detail" class="form-control" placeholder="详细说明*"></textarea>
               <div class="right-btn">
                  <input type="submit" value="申请合作" class="content-btn">
                  <!--                     <a class="content-btn" href="javascript:void(0)" onclick="document.getElementById('myForm').submit();">申请合作</a>-->
               </div>
            </form>
         </div>
      </div>
   </div>
</div>
<div th:insert="common/footer :: footer"></div>

<!--====== Jquery js ======-->
<script src="/js/jquery-1.12.4.min.js"></script>
<script src="/js/jquery-validate.js"></script>
<script src="/js/sweetalert.min.js"></script>
<!--====== Bootstrap js ======-->
<script src="/js/bootstrap.min.js"></script>

<!--====== index  common js ======-->
<script src="/js/common.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
      $("#myForm").validate({
         rules: {
            name: {
               required: true
            },
            cooperType: {
               required: true
            },
            personName: {
               required: true
            },
            position: {
               required: true
            },
            mobile: {
               required: true,
               minlength: 11
            },
            detail: {
               required: true,
               maxlength: 300
            }
         },
         messages: {
            name: {
               required: "请输入企业名称"
            },
            cooperType: {
               required: "请选择合作类型"
            },
            personName: {
               required: "请输入负责人"
            },
            position: {
               required: "请输入职务"
            },
            mobile: {
               required: "请输入手机号",
               minlength: "手机号格式不正确"
            },
            detail: {
               required: "请输入详细说明",
               maxlength: "最多输入300字"
            }
         },
         submitHandler: function(form) {
            const formData = {
               name: $('#name').val(),
               cooperType: $('#cooperType').val(),
               personName: $('#personName').val(),
               position: $('#position').val(),
               mobile: $('#mobile').val(),
               type: 1,
               detail: $('#detail').val(),
            };
            $.ajax({
               type: 'POST',
               url: '/cooper',
               data: formData,
               dataType: 'json',
               success: function(data) {
                  if(data.message!=null){
                     swal({
                        text: data.message,
                        icon: 'error'
                     });
                  }else{
                     swal({
                        text: "申请成功！",
                        icon: 'success'
                     });
                  }
               },
               error: function(jqXHR, textStatus, errorThrown) {
                  console.log('Error: ' + textStatus);
               }
            });
         }
      });
   })
</script>
</body>
</html>
